<template>
<div>

	<el-card class="box-card">
	  <div slot="header" class="clearfix">
	    <span>平台余额：<span class="h1">
	    	{{platformbalance.price == undefined ? 0 : platformbalance.price}}</span> 元
	    </span> 

	    <el-button-group class="fr"> 
		  <el-button type="primary" size="small" 
		  @click="showShopQRCode" >商城地址</el-button>
		  <el-button type="primary" size="small" 
		  @click="showDestroyQRCode">核销地址</el-button>
		</el-button-group>

	    <el-button-group class="fr mr20"> 
		  <el-button type="primary" size="small" @click="showRecharge" >充值</el-button>
		  <el-button type="primary" size="small" @click="showRechargeDetail">明细</el-button>
		</el-button-group>
		
	  </div>

	  <div>
	  	<el-row :gutter="20">
		  <el-col :span="8">
		  	<el-card class="box-card">
			  <div slot="header" class="clearfix text-center">
			    <span>收入</span>
			  </div>
			  <el-row class="text-center">
				  今日收入 : <span class="red h1"> {{profit.today_num}} </span>
			  </el-row>
			  <el-row class="mt5 text-center">
				  昨日收入 : <span class=""> {{profit.yesterday_num}} </span>
			  </el-row>
			  <el-row class="mt5 text-center">
				  总收入 : <span class=""> {{profit.total_num}} </span>
			  </el-row>
			</el-card>
		  </el-col>

		  <el-col :span="8">
		  	<el-card class="box-card">
			  <div slot="header" class="clearfix text-center">
			    <span>订单</span>
			  </div>
			  <el-row class="text-center">
				  今日订单 : <span class="red h1"> {{order.today_num}} </span>
			  </el-row>
			  <el-row class="mt5 text-center">
				  昨日订单 : <span class=""> {{order.yesterday_num}} </span>
			  </el-row>
			  <el-row class="mt5 text-center">
				  总订单 : <span class=""> {{order.total_num}} </span>
			  </el-row>
			</el-card>
		  </el-col>
		  <el-col :span="8">
		  	<el-card class="box-card">
			  <div slot="header" class="clearfix text-center">
			    <span>会员</span>
			  </div>
			  <el-row class="text-center">
				  今日新增会员 : <span class="red h1"> {{member.today_num}} </span>
			  </el-row>
			  <el-row class="mt5 text-center">
				  昨日新增会员 : <span class=""> {{member.yesterday_num}} </span>
			  </el-row>
			  <el-row class="mt5 text-center">
				  会员总数 : <span class=""> {{member.total_num}} </span>
			  </el-row>
			</el-card>
		  </el-col>
		</el-row>
	  </div>
	</el-card>

	<el-card class="box-card mt20">
		<v-chart :options="options"/>
	</el-card>	

	<el-card class="box-card mt20">
		<el-row :gutter="20">
		  <el-col :span="16">
		  	<v-chart :options="options_member"/>
		  </el-col>

		  <el-col :span="8">
		  	<v-chart :options="options_member1"/>
		  </el-col>
		</el-row>
	</el-card>


<el-dialog title="平台充值" :visible.sync="rechareVisible">
	<el-row :gutter="20">
		<el-col :span="20">
			<el-form label-width="180px">
			  	<el-form-item label="商家名称：" >
			      	{{userInfo.company_name}}
			    </el-form-item>
			    <el-form-item label="平台余额：" >
			    	{{platformbalance.price == undefined ? 0 : platformbalance.price}}
			    </el-form-item>
			    <el-form-item label="充值方式：" >
			    	微信
			    </el-form-item>
			    <el-form-item label="充值金额：" >
			      <el-input v-model="recharge.money" style="width:200px;"></el-input>
			    </el-form-item>
			    <el-form-item label="" >
			      	<el-button type="primary" @click="gogo">充值</el-button>
			    </el-form-item>
			  </el-form>
		</el-col>
	</el-row>
  
	<el-dialog
      width="30%"
      title="微信扫描二维码充值"
      :visible.sync="QRVisible"
      class="text-center"
      @close="closeQRCode"
      :show-close="!recharge.loading"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      append-to-body>

      	支付金额 <span class="h1 red">{{recharge.money}}</span> 元


      	<i v-if="recharge.loading" class="el-icon-loading"></i>

      	<qrcode-vue class="mt10" v-if="!recharge.loading"
	  		:value="recharge.qrcode" 
	  		:size="200" level="H">
	  	</qrcode-vue>

	  	

    </el-dialog>
</el-dialog>



<el-dialog title="充值明细" width="70%" :visible.sync="rechareDetailVisible">
	
	<el-form :inline="true" :model="rechargeDetail.form" >
		<el-form-item >
			<daterange v-bind:se.sync="rechargeDetail.form.s_e" type="daterange"></daterange>
	    </el-form-item>

	    <el-form-item >
		    <el-select v-model="rechargeDetail.form.type" >
		      <el-option 
		      v-for="item in rechargeDetail.type_select"
		      :label="item.label" :value="item.value"></el-option>
		    </el-select>
		</el-form-item>

	   	<el-form-item>
		    <el-button type="primary" @click="getRechargeDetail">查询</el-button>
		</el-form-item>
	</el-form>
	
	<el-row >
	<el-table
	    :data="balanceList.results"
	    border
	    v-loading="rechargeDetail.loading"
	    style="width: 100%">
	    <el-table-column
	      prop="create_time"
	      label="交易时间"
	      width="180">
	    </el-table-column>
	    <el-table-column
	      prop="type"
	      label="交易分类"
	      width="100">
	      <template slot-scope="scope">
	      	{{rechargeDetail.type_label[parseInt(scope.row.type)]}}
	      </template>
	    </el-table-column>
	    <el-table-column
	      prop="remark"
	      label="交易信息"
	      >
	    </el-table-column>
	    <el-table-column
	      prop="price"
	      label="交易金额"
	      width="180">
	    </el-table-column>
	</el-table>
	</el-row>

	<el-row class="text-right mt20 mb20">
	<el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageNo"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next"
      :total="balanceList.totalRecord">
    </el-pagination>
    </el-row>

</el-dialog>


<el-dialog
  width="30%"
  title="商城地址"
  :visible.sync="shopQRVisible"
  class="text-center">

  	<qrcode-vue class="mt10"
  		:value="shopurl" 
  		:size="200" level="H">
  	</qrcode-vue>

  	<div class="mt20">{{shopurl}}</div>

</el-dialog>

<el-dialog
  width="30%"
  title="核销地址"
  :visible.sync="destroyQRVisible"
  class="text-center">

  	<qrcode-vue class="mt10"
  		:value="destroyurl" 
  		:size="200" level="H">
  	</qrcode-vue>

  	<div class="mt20">{{destroyurl}}</div>

</el-dialog>




</div>
</template>

<script>

import { mapGetters } from 'vuex';
import ECharts from 'vue-echarts/components/ECharts'
import 'echarts/lib/chart/line'
import 'echarts/lib/chart/bar'
import 'echarts/lib/chart/pie'
import 'echarts/lib/component/polar'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/toolbox'
import 'echarts/lib/component/legend'

import QrcodeVue from 'qrcode.vue';
import daterange from '../../components/daterange'
import { date2str } from '../../config/util'

export default {
	name: 'dashboard',

	data () {

	    let colors = ['#F56C6C', '#67C23A', '#d14a61'];
		return {
			//platformbalance : '',

			profit : {
				today_num : '客官别急',
				yesterday_num : '客官别急',
				total_num : '客官别急',
			},

			order : {
				today_num : '客官别急',
				yesterday_num : '客官别急',
				total_num : '客官别急',
			},

			member : {
				today_num : '客官别急',
				yesterday_num : '客官别急',
				total_num : '客官别急',
			},

			rechareVisible : false,

			QRVisible : false,

			recharge : {
				money : 1,
				qrcode : '',
				loading : true,
				intervalProcess : {},
			},

			rechareDetailVisible : false,

			rechargeDetail : {
				loading : true,
				type_label : ['', '充值', '消费', '退回'],
				type_select : [
					{label : '全部', value : ''},
					{label : '充值', value : '1'},
					{label : '消费', value : '2'},
					{label : '退回', value : '3'},
				],
				form : {
					s_e : [date2str(new Date()), date2str(new Date())],
					type : '',
				},
			},

			pageNo : 1,
			pageSize : 10,
			totalRecord : 0,
			totalPage : 0,

		  	options: {
		  		color : colors,

		        tooltip: {
			        trigger: 'axis',
			        axisPointer: {
			            type: 'cross',
			            crossStyle: {
			                color: '#999'
			            }
			        }
			    },

			    toolbox: {
			        feature: {
			            dataView: {show: true, readOnly: false},
			            magicType: {show: true, type: ['line', 'bar']},
			            restore: {show: true},
			            saveAsImage: {show: true}
			        }
			    },
			    legend: {
			        data:['收入','订单']
			    },
			    xAxis: [
			        {
			            type: 'category',
			            data: [],
			            axisPointer: {
			                type: 'shadow'
			            }
			        }
			    ],
			    yAxis: [
			        {
			            type: 'value',
			            name: '收入',
			            axisLabel: {
			                formatter: '{value} 元'
			            },
			            axisLine: {
			                lineStyle: {
			                    color: colors[0]
			                }
			            },
			        },
			        {
			            type: 'value',
			            name: '订单',
			            position: 'right',
			            axisLabel: {
			                formatter: '{value} 单'
			            },
			            axisLine: {
			                lineStyle: {
			                    color: colors[1]
			                }
			            },
			            splitLine : {
			            	show : false,
			            }
			        },
			    ],
			    series: [
			    ]
		    },


		    options_member: {
		  		//color : colors,

		        tooltip: {
			        trigger: 'axis',
			        axisPointer: {
			            type: 'cross',
			            crossStyle: {
			                color: '#999'
			            }
			        }
			    },

			    toolbox: {
			        feature: {
			            dataView: {show: true, readOnly: false},
			            magicType: {show: true, type: ['line', 'bar']},
			            restore: {show: true},
			            saveAsImage: {show: true}
			        }
			    },
			    legend: {
			        data:['新增粉丝']
			    },
			    xAxis: [
			        {
			            type: 'category',
			            data: [],
			            axisPointer: {
			                type: 'shadow'
			            }
			        }
			    ],
			    yAxis: [
			        {
			            type: 'value',
			            name: '粉丝量',
			            axisLabel: {
			                formatter: '{value} 人'
			            },
			            // axisLine: {
			            //     lineStyle: {
			            //         color: colors[2]
			            //     }
			            // },
			        },
			    ],
			    series: [
			    ]
		    },

		    options_member1 : {
			   
			    tooltip : {
			        trigger: 'item',
			        formatter: "{a} <br/>{b} : {c} ({d}%)"
			    },
			    legend: {
			        // orient: 'vertical',
			        // top: 'middle',
			        // bottom: 10,
			        left: 'center',
			        data: ['一级', '二级', '普通粉丝']
			    },
			    series : [
			        {
			        	name:'商城用户',
			            type: 'pie',
			            radius : '65%',
			            center: ['50%', '50%'],
			            selectedMode: 'single',
			            data:[],
			            itemStyle: {
			                emphasis: {
			                    shadowBlur: 10,
			                    shadowOffsetX: 0,
			                    shadowColor: 'rgba(0, 0, 0, 0.5)'
			                }
			            }
			        }
			    ]
			},


			destroyQRVisible : false,

			shopQRVisible : false,
		}
	},

	components : {
		'v-chart': ECharts,
		QrcodeVue,
		daterange,
	},

	computed : {
		...mapGetters([
			'memberStatistics',
			'profitStatistics',
			'orderStatistics',
			'userInfo',
			'platformbalance',
			'balanceList',
			'URL',
		]),


		shopurl () {
			return this.URL.shop + 'home?company_code=' + this.userInfo.company_code;
		},

		destroyurl () {
			return this.URL.shop + 'destroy/login.html';
		},
	},

	methods : {

		//充值
		showRecharge () {
			this.rechareVisible = true;
		},

		//显示二维码
		gogo () {
			this.QRVisible = true;
			this.recharge.loading = true;

			let para = {
				fun : 'addRecharge',
				money : this.recharge.money,
				pay_type : '2',
				cb : res => {
					this.recharge.qrcode = JSON.parse(res.ret).data;
					this.recharge.loading = false;

					this.recharge.intervalProcess = setInterval( () => {
                        if(res.order_code){
                        	let para1 = {
                        		'fun' : 'getRechargeResult',
                        		deposit_system : '0',
                        		'order_code' : res.order_code,
                        		cb : res => {
                        			if(res == 1){
                        				clearInterval(this.recharge.intervalProcess);

                        				this.$notify({
								          title: '成功',
								          message: '充值成功',
								          type: 'success'
								        });

                        				this.QRVisible = false;
                        				this.rechareVisible = false;
                        				this.getPlatformbalance();

                        			}
                        		}
                        	};
                        	this.$store.dispatch('update', para1);
                        } else {
                            clearInterval(this.recharge.intervalProcess);
                        }
                    }, 1500);
				}
			};

			this.$store.dispatch('update', para);
		},


		closeQRCode () {
			console.log('close');
			clearInterval(this.recharge.intervalProcess);
		},

		showRechargeDetail () {
			this.rechareDetailVisible = true;
			this.getRechargeDetail();
		},

		handleSizeChange (val) {
			this.pageSize = val;
			this.getRechargeDetail();
		},

		handleCurrentChange (val) {
			this.pageNo = val;
			this.getRechargeDetail();
		},

		getRechargeDetail() {
			this.rechargeDetail.loading = true;
			let para = {
				fun : 'balanceList',
				pageNo : this.pageNo,
				pageSize : this.pageSize,
				start_time : this.rechargeDetail.form.s_e[0] + ' 00:00:00',
				end_time : this.rechargeDetail.form.s_e[1] + ' 23:59:59',
				type : this.rechargeDetail.form.type,
				cb : res => {
					console.log(res);
					this.rechargeDetail.loading = false;
				}
			};
			this.$store.dispatch('query', para);
		},

		makeProfitOrderChartsData () {
			let para1 = {
				cb : res => {
					console.log(res);

					this.profit = res.profit;
					this.order = res.order;

					// -- 数据 -- //
					let profit = {
						'name' : '收入',
						'type' : 'bar',
						'data' : [],
					};

					let order = {
						'name' : '订单',
						'type' : 'line',
						'yAxisIndex' : 1,
						'data' : [],
					};
					// -- 数据 -- //

					// -- x轴数据 -- //
					for(let i = 0; i < res.profit.seven_num.length; i++){
						let tmp = res.profit.seven_num[i];
						this.options.xAxis[0].data.push(tmp.date.substring(5));
						profit.data.push(tmp.total_price);
					}
					for(let i = 0; i < res.order.seven_num.length; i++){
						let tmp = res.order.seven_num[i];
						order.data.push(tmp.num);
					}
					// -- x轴数据 -- //

					this.options.series.push(profit);
					this.options.series.push(order);
				}
			};

			this.$store.dispatch('getDashboardData', para1);
		},

		makeUserChartsData () {
			let para2 = {
				fun : 'memberStatistics',
				cb : res => {
					this.member = res;

					// -- 柱状图数据 -- //
					let member = {
						'name' : '新增粉丝',
						'type' : 'bar',
						'data' : [],
					};
					for(let i = 0; i < res.seven_num.length; i++){
						let tmp = res.seven_num[i];
						this.options_member.xAxis[0].data.push(tmp.date.substring(5));
						member.data.push(tmp.num);
					}
					this.options_member.series.push(member);
					// -- 柱状图数据 -- //

					// -- 饼图数据 -- //
					let one = res.one_distributor_num;
					let two = res.two_distributor_num;
					let nomal = res.total_num - one - two - 1;

					this.options_member1.series[0].data.push({'value' : one, name: '一级'});

					this.options_member1.series[0].data.push({'value' : two, name: '二级'});

					this.options_member1.series[0].data.push({'value' : nomal, name: '普通粉丝'});
					// -- 饼图数据 -- //
				}
			};
			this.$store.dispatch('query', para2);
		},


		showShopQRCode () {
			this.shopQRVisible = true;
		},
		showDestroyQRCode () {
			this.destroyQRVisible = true;
		},

		getPlatformbalance () {
			let para3 = {
				fun : 'platformbalance',
			};
			this.$store.dispatch('query', para3);
		},

	},

	watch:{
	    
	},

	mounted () {
		
		this.makeProfitOrderChartsData();

		this.makeUserChartsData();

		this.getPlatformbalance();
	},

}
</script>

<style scoped>
.echarts {
  width: 100%;
  /*height: 100%;*/
}
</style>
